<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 200px;height:200px;border: solid 1px black;display: block;margin: 20px auto;font-size: 80px;text-align: center;}
    .btn{width:200px;height: 100px;font-size: 50px;display: block;margin: 0 auto;}
  </style>
</head>
<body>
  <input type="text" readonly class="box">
  <input type="button" class="btn" value="开始">
</body>
<script>

  var box = $(".box");
  var btn = $(".btn");

  // 初始值
  var num = 3;
  var ressetNum = 3;
  // 显示初始值
  box.value = num;

  var t;

  // 下一次点击要执行的功能对应的状态：0表示开始，1表示暂停，2表示复位
  var state = 0;
  
  // 点击事件
  btn.onclick = function(){
    if(state === 0){
      // 开始功能：
      // 保证当前功能内只有一个计时器：开启计时器之前，先判断是否已经存在计时器，如果已经存在，不需要重复开启
      if(t !== undefined){ return };
      // 开启计时器
      t = setInterval(function(){
        // 减小初始值
        num--;
        // 设置回页面
        box.value = num;
        // 判断是否到终点
        if(num === 0){
          box.value = "over";
          // 清除计时器
          clearInterval(t);
          t = undefined;
          state = 2;
          btn.value = "复位";
        }
      }, 1000);
      state = 1;
      btn.value = "暂停";
    }else if(state === 1){
      // 暂停功能：
      // 清除计时器
      clearInterval(t);
      // 重置计时器的返回值
      t = undefined;
      // 同步状态
      state = 0;
      // 对应文字
      btn.value = "继续";
    }else if(state === 2){
      // 复位功能：
      // 重置显示区域和参与计算的数字
      box.value = num = ressetNum;
      // 对应文字
      btn.value = "开始";
      // 同步状态
      state = 0;
    }
  }



  function $(s){
    return document.querySelector(s)
  }

  
  // 函数节流
  // 函数防抖
</script>
</html>